<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">添加地址</view>
		</view>
		<view class="clear_box"></view>
		
		<view class="address_list">
					<view class="title">收货人</view>
					<input type="text" v-model="receive_name" placeholder="请填写姓名" />
				</view>
		
				<view class="address_list">
					<view class="title">联系电话</view>
					<input type="text" v-model="receive_tel" placeholder="请填写联系电话" />
				</view>
		
				<view class="address_list" @tap="openAddres">
					<view class="title">收货地址</view>
					<input type="text" :value="pickerText" disabled="true" placeholder="请选择省、市、区" />
				</view>
		
				<view class="address_list">
					<view class="title">详细地址</view>
					<!-- <input type="text" value="" placeholder="门牌号（街道、楼牌号）" /> -->
					<textarea v-model="address" placeholder="门牌号（街道、楼牌号）"></textarea>
				</view>
		
				<button class="confirm02" @click="save">保存地址</button>
		
				<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#333"></simple-address>
			</view>
		</template>
		
		<script>
		import simpleAddress from '@/components/simple-address/simple-address.vue';
		export default {
			data() {
				return {
					cityPickerValueDefault: [0, 0, 1],
					pickerText: '',
					receive_name: '',
					receive_tel: '',
					address: '',
					addressId: ''
				};
			},
			components: {
				simpleAddress
			},
			onLoad(e) {
				let that = this;
				if (e.id) {
					that.addressId = e.id;
					that.loadInfo();
				}
		
				
			},
			methods: {
				backPage() {
					uni.navigateBack({});
				},
				gotopage(e) {
					let url = e.currentTarget.dataset.url;
					uni.navigateTo({
						url: url
					});
				},
				openAddres() {
					this.cityPickerValueDefault = [0, 0, 1];
					this.$refs.simpleAddress.open();
				},
		
				onConfirm(e) {
					this.pickerText = JSON.stringify(e.label);
					//console.log(this.pickerText);
				},
		
				loadInfo() {
					let that = this;
					that.Net._get('user/addresses/' + that.addressId, {}, res => {
						if (res.code == 200) {
							that.address = res.data.address;
							that.receive_name = res.data.receive_name;
							that.receive_tel = res.data.receive_tel;
							that.pickerText = res.data.area_info;
						}
					});
				},
		
				save() {
					let that = this;
					if (!that.receive_name) {
						that.Msg.Fail('请填写姓名');
						return;
					}
					if (!that.receive_tel) {
						that.Msg.Fail('请填写联系电话');
						return;
					}
					if (!that.pickerText) {
						that.Msg.Fail('请选择地址');
						return;
					}
					if (!that.address) {
						that.Msg.Fail('请填写详细地址');
						return;
					}
					if (!that.addressId) {
						that.Net._post(
							'user/addresses',
							{ id: that.addressId, receive_name: that.receive_name, receive_tel: that.receive_tel, address: that.address, area_info: that.pickerText },
							res => {
								if (res.code == 200) {
									that.Msg.Success('保存成功', res => {
										uni.navigateBack({});
									});
								} else if (res.code != 200) {
									that.Msg.Success(res.msg, res => {});
								}
							}
						);
					} else {
						that.Net._put(
							'user/addresses/'+ that.addressId,
							{ id: that.addressId, receive_name: that.receive_name, receive_tel: that.receive_tel, address: that.address, area_info: that.pickerText },
							res => {
								if (res.code == 200) {
									that.Msg.Success('保存成功', res => {
										uni.navigateBack({});
									});
								} else if (res.code != 200) {
									that.Msg.Success(res.msg, res => {});
								}
							}
						);
					}
				}
			}
		};
</script>

<style>
	page{
		padding-top: 4%;
	}
	
	.address_list{
		width: 92%;
		margin: 0 auto;
		display: flex;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.address_list:nth-child(3){
		border-radius: 2vw 2vw 0 0;
	}
	
	.address_list:nth-child(6){
		border-radius:  0 0 2vw 2vw;
	}
	
	.address_list:nth-child(4) .icon{
		font-size: 5.5vw;
	}
	
	.address_list:nth-child(5) .icon{
		font-size: 5.5vw;
	}
	
	.address_list:nth-child(6) .icon{
		font-size: 5.5vw;
	}
	
	.address_list .title{
		width: 20vw;
		text-align: left;
		color: #333;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
		font-weight: bold;
	}
	
	.address_list input{
		flex: 1;
		text-align: left;
		color: #333;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
	}
	
	.address_list textarea{
		flex: 1;
		text-align: left;
		color: #333;
		height: 30vw;
		line-height: 7vw;
		font-size: 4vw;
		background-color: #f5f5f5;
		border-radius: 1vw;
		padding: 1vw;
	}

</style>
